<template>
  <div class="page-content">
    <div class="header">
      <div class="header-title">打卡动态</div>
      <div class="header-right">
        <span class="search-icon">🔍</span>
      </div>
    </div>
    
    <div class="container" v-if="loading">
      <div class="loading">加载中...</div>
    </div>
    
    <div class="container" v-else-if="checkIns.length === 0">
      <div class="empty">暂无打卡动态</div>
    </div>
    
    <div class="container" v-else>
      <div class="checkin-list">
        <div v-for="checkIn in checkIns" :key="checkIn.id" class="checkin-item">
          <!-- 用户信息 -->
          <div class="user-info">
            <img :src="checkIn.user.avatar" alt="用户头像" class="avatar" />
            <div class="user-detail">
              <div class="username">{{ checkIn.user.username }}</div>
              <div class="time-location">
                <span class="time">{{ checkIn.formattedTime }}</span>
                <span v-if="checkIn.location" class="location">📍 {{ checkIn.location }}</span>
              </div>
            </div>
          </div>
          
          <!-- 打卡内容 -->
          <div class="content" @click="goToDetail(checkIn.id)">
            {{ checkIn.content }}
          </div>
          
          <!-- 图片列表 -->
          <div v-if="checkIn.imageUrls.length > 0" class="image-list">
            <div v-for="(img, index) in checkIn.imageUrls" :key="index" class="image-list-item" @click="previewImage(checkIn.imageUrls, index)">
              <img :src="img" alt="打卡图片" />
            </div>
          </div>
          
          <!-- 操作栏 -->
          <div class="action-bar">
            <div class="action-item" @click="toggleLike(checkIn)">
              <span class="icon" :class="{ active: checkIn.isLiked }">
                {{ checkIn.isLiked ? '❤️' : '🤍' }}
              </span>
              <span class="text">{{ checkIn.likeCount || 0 }}</span>
            </div>
            <div class="action-item" @click="goToDetail(checkIn.id)">
              <span class="icon">💬</span>
              <span class="text">{{ checkIn.commentCount || 0 }}</span>
            </div>
            <div class="action-item" @click="share(checkIn)">
              <span class="icon">📤</span>
              <span class="text">分享</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 加载更多 -->
      <div v-if="hasMore" class="load-more" @click="loadMore">
        加载更多
      </div>
      <div v-else-if="checkIns.length > 0" class="no-more">
        没有更多了
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { mock } from '../utils/mockData.js'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()
    const checkIns = ref([])
    const loading = ref(true)
    const page = ref(1)
    const pageSize = 10
    const hasMore = ref(true)
    
    // 加载打卡列表
    const loadCheckIns = async (isLoadMore = false) => {
      try {
        if (!isLoadMore) {
          loading.value = true
        }
        
        // 使用mock数据
        const result = mock.getCheckInList(isLoadMore ? page.value + 1 : 1, pageSize)
        
        if (isLoadMore) {
          checkIns.value = [...checkIns.value, ...result.list]
          page.value += 1
        } else {
          checkIns.value = result.list
        }
        
        hasMore.value = checkIns.value.length < result.total
      } catch (error) {
        console.error('加载打卡列表失败:', error)
      } finally {
        loading.value = false
      }
    }
    
    // 加载更多
    const loadMore = () => {
      if (!loading.value && hasMore.value) {
        loadCheckIns(true)
      }
    }
    
    // 切换点赞状态
    const toggleLike = (checkIn) => {
      try {
        const result = mock.toggleLike(checkIn.id)
        if (result) {
          checkIn.isLiked = result.isLiked
          checkIn.likeCount = result.likeCount
        }
      } catch (error) {
        console.error('点赞操作失败:', error)
      }
    }
    
    // 跳转到详情页
    const goToDetail = (id) => {
      router.push(`/detail/${id}`)
    }
    
    // 预览图片
    const previewImage = (images, index) => {
      // 这里可以实现图片预览功能
      console.log('预览图片:', images, index)
    }
    
    // 分享
    const share = (checkIn) => {
      alert('分享功能暂未实现')
    }
    
    // 页面加载时获取数据
    onMounted(() => {
      loadCheckIns()
      
      // 模拟下拉刷新
      let startY = 0
      const handleTouchStart = (e) => {
        startY = e.touches[0].clientY
      }
      
      const handleTouchMove = (e) => {
        const currentY = e.touches[0].clientY
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        
        // 当滚动到顶部且继续下拉时，重新加载数据
        if (scrollTop <= 0 && currentY - startY > 100) {
          loadCheckIns()
        }
      }
      
      document.addEventListener('touchstart', handleTouchStart)
      document.addEventListener('touchmove', handleTouchMove)
      
      // 清理事件监听
      return () => {
        document.removeEventListener('touchstart', handleTouchStart)
        document.removeEventListener('touchmove', handleTouchMove)
      }
    })
    
    return {
      checkIns,
      loading,
      hasMore,
      loadMore,
      toggleLike,
      goToDetail,
      previewImage,
      share
    }
  }
}
</script>

<style scoped>
.checkin-list {
  margin-bottom: 16px;
}

.checkin-item {
  background-color: white;
  margin-bottom: 8px;
  padding: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-detail {
  margin-left: 12px;
  flex: 1;
}

.username {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}

.time-location {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-light);
}

.location {
  margin-left: 8px;
}

.content {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
  word-break: break-word;
}

.action-bar {
  display: flex;
  border-top: 1px solid #f0f0f0;
  margin-top: 12px;
  padding-top: 12px;
}

.action-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.action-item .icon {
  margin-right: 4px;
  font-size: 16px;
}

.action-item .icon.active {
  color: var(--red);
}

.load-more,
.no-more {
  text-align: center;
  padding: 16px;
  color: var(--text-light);
  font-size: 14px;
}

.load-more {
  cursor: pointer;
}

.load-more:active {
  background-color: #f5f5f5;
}
</style>